<template>
	<view class="cu-bar tabbar shopnav margin-bottom-xl">
		<view class="action" :class="[(k == active) ? 'active' : 'text-gray']" v-for="(i,k) in nav" :key="k" @click="goto(i.path)">
			<view :class="i.icon"></view> {{i.text}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			active: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				nav: [
					{ text: '首页', path: '/pages/shop/shop', icon: 'cuIcon-home' },
					{ text: '购物车', path: '/pages/shop/cart', icon: 'cuIcon-cart' },
					{ text: '订单管理', path: '/pages/shop/order', icon: 'cuIcon-form' }
				]
			}
		},
		methods: {
			goto(path) {
				uni.navigateTo({
					url: path,
					animationType: 'slide-in-right',
					animationDuration: 300
				})
			},
		}
	}
</script>

<style>
	@import url("/colorui/main.css");
	@import url("/colorui/icon.css");
	
	.tabbar {
		background-color: #434657;
		position: fixed;
		width: 100%;
		z-index: 999;
		bottom: 0;
		margin: 0;
	}
</style>
